<template>
  <div class="hr-container">
    <div class="banner">
      <img src="http://www.sutpc.com/static/images/hr-banner.jpg" alt="人力资源" />
      <div class="banner-text">
        <h1>人力资源</h1>
      </div>
    </div>

    <div class="content-wrapper">
      <div class="container">
        <div class="hr-nav">
          <router-link to="/hr/culture">企业文化</router-link>
          <router-link to="/hr/training">人才培养</router-link>
          <router-link to="/hr/recruitment">人才招聘</router-link>
        </div>
        
        <div class="hr-content">
          <router-view />
          <div v-if="$route.path === '/hr'" class="hr-default-content">
            <h2>人才理念</h2>
            <p>中空领航秉持"人才是第一资源"的理念，重视人才培养与发展，为员工提供广阔的职业发展平台和良好的工作环境。我们注重员工的专业成长，鼓励创新思维，致力于打造一支高素质、专业化的人才队伍。</p>
            
            <h2>人才战略</h2>
            <p>公司实施人才强企战略，通过建立科学的人才评价体系、完善的培训机制和有竞争力的薪酬福利体系，吸引和留住优秀人才。我们坚持"以人为本"的管理理念，充分发挥员工的创造力和积极性，实现企业与员工的共同发展。</p>
            
            <div class="join-us">
              <h2>加入我们</h2>
              <p>如果您对我们有兴趣，期待与中空领航一起成长，请点击"人才招聘"了解更多职位信息。</p>
              <router-link to="/hr/recruitment" class="join-btn">查看招聘信息</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HR'
}
</script>

<style scoped>
.hr-container {
  min-height: 600px;
}

.banner {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  width: 100%;
}

.banner-text h1 {
  font-size: 36px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.content-wrapper {
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.hr-nav {
  background: #f5f5f5;
  padding: 15px 0;
  margin-bottom: 30px;
  text-align: center;
}

.hr-nav a {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 10px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s;
}

.hr-nav a:hover, .hr-nav a.router-link-active {
  color: #0066cc;
  font-weight: bold;
}

.hr-content {
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  min-height: 400px;
}

.hr-default-content h2 {
  font-size: 24px;
  color: #0066cc;
  margin: 20px 0 15px;
}

.hr-default-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
}

.join-us {
  margin-top: 40px;
  padding: 20px;
  background-color: #f5f9ff;
  border-left: 4px solid #0066cc;
}

.join-btn {
  display: inline-block;
  padding: 10px 25px;
  background-color: #0066cc;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  margin-top: 15px;
  transition: background-color 0.3s;
}

.join-btn:hover {
  background-color: #0055aa;
}
</style> 